<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
    	String path = request.getContextPath();
    %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
	* {
		margin:0px;
		padding:0px;
	}
	.WinDisplay{
		margin:auto;
	}
</style>

	
	<link rel="stylesheet" type="text/css" href="<%=path%>/js/jquery-easyui-1.4.5/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=path%>/js/jquery-easyui-1.4.5/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=path%>/css/admin.css">
	<script type="text/javascript" src="<%=path%>/js/jquery.js"></script>
	<script type="text/javascript" src="<%=path%>/js/jquery-easyui-1.4.5locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=path%>/js/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script>

	function setPagination(tableId) {
		var p = $("#" + tableId).datagrid("getPager"); // 获取由tableId指定的datagrid控件的分页组件
		// $(id).datagrid("load"); 跳转到第一页
		// $(id).datagrid("reload"); 刷新当前页
		$(p).pagination({
			pageList:[10, 20,30],
			beforePageText:"第",
			afterPageText:"页    共{pages}页",
			displayMsg:"当前显示{from} - {to} 条记录    共{total}条记录",
			onBeforeRefresh:function() {
				$(this).pagination("loading");
				$(this).pagination("loaded");
			}
		});
	}
	
	$(function() {
		setPagination("list");
		/**
		$(document).bind('contextmenu',function(e){ // 给网页绑定右键菜单
			e.preventDefault(); // 如果没有加这句话，则还会打开网页浏览器自带的右键菜单 。。。阻止默认行为
			$('#mm').menu('show', {
				left: e.pageX, // 鼠标右键点击的x坐标
				top: e.pageY // 鼠标右键点击的y坐标
			});
		});
		**/
		
		$("#new").click(function() {
			$.messager.alert("提示", "新建菜单", "info");
		});
		
		$("#list").datagrid({
			onRowContextMenu: function(e, rowIndex, rowData) {  // datagrid中的每一行都绑定右键菜单
                e.preventDefault(); 
                $('#mm').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
		});
		
	});
	
	function edit() {
		var row = $("#list").datagrid("getSelected"); // 获取datagrid中被选中的行
		if (row) {
			$("#editForm").form("load", row); // .form("clear");
			$("#editWin").window("open"); // close关闭
		} else {
			$.messager.alert('提示', '请选中需要修改的部门', 'info');// messager消息控件
		}
	}
	
	function add() {
		$("#addWin").window("open"); // close关闭
	}
	
	function doEdit() {
		if ($("#editForm").form("validate")) { // 验证整个表单里的所有validatabox是否通过验证
			$.post(
					'product/update',
					$("#editForm").serialize(), // 直接把表单数据序列化成服务端可以接收的数据格式
					function(data) {
						if (data.result == 'success') {
							$.messager.alert("提示", data.msg, "info", function() {
									$("#editWin").window("close");
									$("#list").datagrid("reload");
							});
						} else {
							$.messger.alert("提示", data.msg + " 请稍候再试", "info");
						}
					});
		} 
	}
	
	function doAdd() {
		if ($("#addForm").form("validate")) { // 验证整个表单里的所有validatabox是否通过验证
			$.post(
					'product/add',
					$("#addForm").serialize(), // 直接把表单数据序列化成服务端可以接收的数据格式
					function(data) {
						if (data.result == 'success') {
							$.messager.alert("提示", data.msg, "info", function() {
									$("#addWin").window("close");
									
									$("#addForm").form("clear");
							});
						} else {
							$.messger.alert("提示", data.msg, "info");
						}
					});
			$("#list").datagrid("reload");
		} 
	}
	
	function removePro() {
		var row = $("#list").datagrid("getSelected");
		if (row) {
			$.post("product/remove", {'id':row.id}, function(data) {
				if (data.result == "success") {
					$.messager.alert("提示", data.msg, "info", function() {
						$("#list").datagrid("reload");
					});
				}
			});
		} else {
			$.messager.alert("提示", "请先选择需要移除的部门", "warning");
		}
	}
	
</script>

</head>
<body>
	<table id="list" class="easyui-datagrid" toolbar="#tb" data-options="
		url:'<%=path %>/product/queryByPager', 
		method:'get', 
		rownumbers:true,
		singleSelect:true,
		autoRowHeight: true,
		pagination:true,
		border:false,
		pageSize:20">
		<thead>
			<tr>
				<th field="id" checkbox="true" width="100">产品编号</th>
				<th field="name" width="100">名称</th>
				<th field="price"  width="100">价格</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:10px;">
		<a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add',toggle:true" onclick="add();">添加</a>
		<a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-remove',toggle:true" onclick="removePro();">删除</a>
		<a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-save',toggle:true,selected:true" onclick="edit();">修改</a>
		<a href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-cut',toggle:true">Cut</a>
		<a href="javascript:;" class="easyui-linkbutton" data-options="toggle:true">Text Button</a>

	</div>
	
	<div id="addWin" class="easyui-window WinDisplay" title="添加部门" data-options="iconCls:'icon-edit', closable:true, closed:true"  style="width:300px;height:200px;padding:5px;">
		<form id="addForm" enctype="multipart/form-data" >
			<table >
				<tr style="height: 30px;">
					<td >部门名称:</td>
					<td>
						<input class="easyui-validatebox textbox" name="name" data-options="required:true, novalidate:true" /><!-- 由dataoptions指定验证的规则 -->
					</td>
				</tr>
				<tr style="height:30px;">
					<td>部门类型:</td>
					<td>
						<select class="easyui-combobox" name="">
							<option value="1">可运转</option>
							<option value="2">待运转</option>
						</select>
					</td>
				</tr>

				<tr>
					<td></td>
					<td>
						<input type="button" onclick="doAdd();" value="确认" />
					</td>
				</tr>
			</table>
			
		</form>
	</div>
	
	<div id="editWin" class="easyui-window" title="修改部门" data-options="iconCls:'icon-edit', closable:true, closed:true"  style="width:300px;height:200px;padding:5px;">
				<form id="addForm" enctype="multipart/form-data" >
			<table >
				<tr style="height: 30px;">
					<td >部门名称:</td>
					<td>
						<input class="easyui-validatebox textbox" name="name" data-options="required:true, novalidate:true" /><!-- 由dataoptions指定验证的规则 -->
					</td>
				</tr>
				<tr style="height:30px;">
					<td>部门类型:</td>
					<td>
						<select class="easyui-combobox" name="">
							<option value="1">可运转</option>
							<option value="2">待运转</option>
						</select>
					</td>
				</tr>

				<tr>
					<td></td>
					<td>
						<input type="button" onclick="doAdd();" value="确认" />
					</td>
				</tr>
			</table>
		</form>
	</div>
	
	<div id="mm" class="easyui-menu" style="width:120px;">
		<div id="new" data-options="name:'new'">New</div>
		<div data-options="name:'save',iconCls:'icon-save'">Save</div>
		<div data-options="name:'print',iconCls:'icon-print'">Print</div>
		<div class="menu-sep"></div>
		<div data-options="name:'exit'">Exit</div>
		
	</div>
	
</body>
</html>